<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@page isELIgnored="false" %>
<%@include file="../common/taglibs.jsp" %>
<%
	String path = request.getContextPath();    
	//获得项目完全路径（假设你的项目叫MyApp，那么获得到的地址就是 http://localhost:8080/MyApp/）:    
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path; 
%>
<!DOCTYPE html>
<html lang="en">
 <head>
	
 <link href="<%=basePath %>/assets/css/page/page.css" rel="stylesheet">
 <link href="<%=basePath %>/assets/css/page/image1.gif">
 <link href="<%=basePath %>/assets/css/page/image2.gif">
 <link href="<%=basePath %>/assets/css/page/meneame.jpg">
 
 </head>
 <body>
  <%@include file="head.jsp" %>
 		
    <div class="container">
      <div class="row">

    		<div class="col-md-3">  
		    		<%@include file="myAccount4Left.jsp" %>
       		 </div><!--/span2-->

    	<div class="col-md-9">
	      <ul class="breadcrumb">
		      <li><a href="<%=basePath %>/index">Home</a> <span class="divider"><span class="glyphicon glyphicon-chevron-right"></span>Account&nbsp;<span class="glyphicon glyphicon-chevron-right"></span> My Orders</span></li>
		  </ul>
          <h4><font color="orange">My Orders</font></h4>
          <hr> 
          <div class="row">
          		<div class="col-md-3">
          			<select class="form-control"  onchange="monthSelected(this);">
			            <option value="1" <c:if test="${toMyOrderParam_month == 1}">selected</c:if>>Last three Month</option>
			            <option value="2" <c:if test="${toMyOrderParam_month == 2}">selected</c:if>>Last year</option>
			            <option value="3" <c:if test="${toMyOrderParam_month == 3}">selected</c:if>>All</option>
		            </select>	  		
          		</div>
          </div>
           
		 <br>
		 <c:forEach items="${page.data }" var="order">
		 <div class="panel panel-default">
			  <div class="panel-heading">
				  	<div class="row">
				  		<div class="col-md-3">
				  			<a href="#" onclick="javascript:window.open('<%=basePath%>/orderDetail/${order.id }/orderDetail');">${order.orderNo}</a>
				  		</div>
				  		<div class="col-md-8">
				  			<fmt:formatDate value="${order.createTm}" pattern="MM/dd/yyyy" />
				  		</div>
				  	</div>	
			  </div>
			  <div class="panel-body">
				 <div class="row">
				      <table class="table table-bordered">
				        <tbody>
				          <c:set var="detail_index" value="1"></c:set>
				          <c:forEach items="${order.orderDetails }" var="orderDetail">
				          <tr>
				            	<td>
				            		 <div class="row">
					                      <div class="col-md-3">
					                        <a href="#" onclick="javascript:window.open('<%=basePath %>/product/${orderDetail.productId}/productDetail');" class="thumbnail">
					                          <img src="<%=basePath %>/assets/images/product/${orderDetail.mainImgPath}" width="130" height="130"/>
					                        </a> 
					                      </div>
					                      <div class="col-md-5">
					                      	  <a href="#" onclick="javascript:window.open('<%=basePath %>/product/${orderDetail.productId}/productDetail');">
					                          ${orderDetail.productName}
					                          </a>
					                      </div>
					                      <div class="col-md-2">
					                         ${orderDetail.amount}
					                      </div>
					                      <div class="col-md-2">
					                        <strong ><font color="red">$<span>${orderDetail.itemTotal}</span></font></strong>
					                      </div>
					                    </div>  
				           	 	</td>
				           	 	<c:if test="${detail_index == 1}">
				            	<td rowspan="${fn:length(order.orderDetails)}">
				            	   <c:choose>
				                      			<c:when test="${order.orderTotalPrice > order.discountTotalPrice }">
				                      				<del><h6>$${order.orderTotalPrice }</h6></del>
				                      			</c:when>
			                      	</c:choose>
                        			<strong ><font color="red">$${order.discountTotalPrice }</font></strong>
				            	</td>
				           		<td rowspan="${fn:length(order.orderDetails)}">
				            		<c:choose>
												<c:when test="${order.orderStatus == 1}">
													<p>Awaiting Payment</p>
													<button class="btn btn-warning btn-sm" type="button" onclick="window.location.href='<%=basePath%>/product/${order.id }/checkOut'">checkout</button>
												</c:when>
												<c:when test="${order.orderStatus == 2}">
													Paied
													<p><fmt:formatDate value="${order.payTm}" pattern="MM/dd/yyyy" /></p> 
												</c:when>
												<c:when test="${order.orderStatus == 3}">
													Shipped
													<p><fmt:formatDate value="${order.dispatchTm}" pattern="MM/dd/yyyy" /></p> 
												</c:when>
												<c:when test="${order.orderStatus == 4}">
													Completed
													<p><fmt:formatDate value="${order.completedTm}" pattern="MM/dd/yyyy" /></p> 
												</c:when>
												<c:when test="${order.orderStatus == 5}">
													Cancelled
													<p><fmt:formatDate value="${order.cancelledTm}" pattern="MM/dd/yyyy" /></p> 
												</c:when>
												<c:when test="${order.orderStatus == 6}">
													Pending audit
													<p><fmt:formatDate value="${order.refundApplyTm}" pattern="MM/dd/yyyy" /></p> 
												</c:when>
												<c:when test="${order.orderStatus == 7}">
													Refunded
													<p><fmt:formatDate value="${order.refundedTm}" pattern="MM/dd/yyyy" /></p> 
												</c:when>
												<c:when test="${order.orderStatus == 8}">
													Declined
													<p><fmt:formatDate value="${order.declinedTm}" pattern="MM/dd/yyyy" /></p> 
												</c:when>
												<c:when test="${order.orderStatus == 9}">
													Refunding
													<p><fmt:formatDate value="${order.declinedTm}" pattern="MM/dd/yyyy" /></p> 
												</c:when>
										</c:choose>
				            	</td>
			            		<c:choose>
										<c:when test="${order.orderStatus==1}">
										<td rowspan="${fn:length(order.orderDetails)}">
											<a href="<%=basePath %>/order/${order.id }/cancelOrder">Cancel</a>
										</td>
										</c:when>
										<c:when test="${order.orderStatus==2}">
										<td rowspan="${fn:length(order.orderDetails)}">
											<a href="#refundRequestWindow" onclick="javascript:refundRequest('${order.id}');" data-toggle="modal">
											<button class="btn btn-link" type="button">Refund Request</button>
											</a>
										</td>
										</c:when>
										<c:when test="${order.orderStatus==3}">
										<td rowspan="${fn:length(order.orderDetails)}">
											<a onclick="javascript:window.open('http://app3.hongkongpost.hk/CGI/mt/mt2result.jsp?method=post&submit=Enter&tracknbr=${order.shippingNo}')" >
												<button class="btn btn-link" type="button">Track Package</button>
											</a>
											<!-- 有物流单号且已邮件通知 -->
											<c:if test="${!empty order.shippingNo}">
											<c:if test="${!empty order.dispatchMailTm}">
											<p>&nbsp;&nbsp;&nbsp;
												 <button title="Tracking Infomation" data-original-title="" type="button" class="btn btn-default btn-sm trackinfoclass" data-container="body" data-toggle="popover" data-placement="left" 
												 data-content="Tracking Number is:&nbsp;${order.shippingNo } Express:&nbsp;${order.dispatchKind}">
													tracking info
												 </button>
											</p>
											</c:if>
											</c:if>
											
										</td>
										
										</c:when>
										<c:otherwise>
										</c:otherwise>
								</c:choose>
				            	
				            	</c:if>
				          </tr>
				          <c:set var="detail_index" value="${detail_index+1 }"></c:set>
				          </c:forEach>
				        </tbody>
				      </table>
				 </div>
			 </div><!-- panel-body -->
			 </div><!--  -->
		  </c:forEach>

		 <!-- 分页工具条 begin -->
          <div class="row" >
   			<!-- 总页数大于1时才显示分页工具 -->
	       <c:if test="${page.totalPage >1}">
	       <div class="yahoo2">
	       		<c:choose>
	       			<c:when test="${page.totalPage <=10}">
	       				<c:choose>
	       							<c:when test="${(page.currentPage+1)==1}">
	       								<span class="disabled">&lt;Prev</span>
	       							</c:when>
	       							<c:otherwise>
	       								<a href="<%=basePath%>/order/toMyOrder?pageIndex=${page.currentPage}">&lt;Prev</a>
	       							</c:otherwise>
	       				</c:choose>
	       				<c:forEach var="i" begin="1" end="${page.totalPage}">
		       				<c:choose>
		       					<c:when test="${i == (page.currentPage+1) }">
		       						<span class="current">${i}</span>
		       					</c:when>
		       					<c:otherwise>
		       						<a href="<%=basePath%>/order/toMyOrder?pageIndex=${i}">${i}</a>
		       					</c:otherwise>
		       				</c:choose>
	       				</c:forEach>
	       				<c:choose>
	       							<c:when test="${(page.currentPage+1)==page.totalPage}">
	       								<span class="disabled">&lt;Prev</span>
	       							</c:when>
	       							<c:otherwise>
	       								<a href="<%=basePath%>/order/toMyOrder?pageIndex=${(page.currentPage+1)+1}">Next&gt;</a>
	       							</c:otherwise>
	       				</c:choose>
	       			</c:when>
	       			<c:when test="${page.totalPage >10}">
	       				<c:choose>
	       					<c:when test="${(page.currentPage+1)<=5 }">
	       						<c:choose>
	       							<c:when test="${(page.currentPage+1)==1}">
	       								<span class="disabled">&lt;Prev</span>
	       							</c:when>
	       							<c:otherwise>
	       								<a href="<%=basePath%>/order/toMyOrder?pageIndex=${page.currentPage}">&lt;Prev</a>
	       							</c:otherwise>
	       						</c:choose>
		       					<c:forEach var="i" begin="1" end="5">
		       						<c:choose>
		       							<c:when test="${(page.currentPage+1)==i }">
		       								<span class="current">${i}</span>
		       							</c:when>
		       							<c:otherwise>
		       								<a href="<%=basePath%>/order/toMyOrder?pageIndex=${i}">${i }</a>
		       							</c:otherwise>
		       						</c:choose>
		       					</c:forEach>
								<a href="<%=basePath%>/order/toMyOrder?pageIndex=6">6</a>
								<a href="<%=basePath%>/order/toMyOrder?pageIndex=7">7</a>...
								<a href="<%=basePath%>/order/toMyOrder?pageIndex=${page.totalPage-1}">${page.totalPage-1}</a>
								<a href="<%=basePath%>/order/toMyOrder?pageIndex=${page.totalPage}">${page.totalPage}</a>
								<a href="<%=basePath%>/order/toMyOrder?pageIndex=${(page.currentPage+1)+1}">Next&gt;</a>
	       					</c:when>
	       					
	       					<c:when test="${(page.currentPage+1)>(page.totalPage-5)}">
	       						<a href="<%=basePath%>/order/toMyOrder?pageIndex=${page.currentPage}">&lt;Prev</a>
	       						<a href="<%=basePath%>/order/toMyOrder?pageIndex=1">1</a>
	       						<a href="<%=basePath%>/order/toMyOrder?pageIndex=2">2</a>
	       						...
	       						<c:forEach var="i" begin="${page.totalPage-6}" end="${page.totalPage}">
		       						<c:choose>
			       							<c:when test="${(page.currentPage+1)==i }">
			       								<span class="current">${i}</span>
			       							</c:when>
			       							<c:otherwise>
			       								<a href="<%=basePath%>/order/toMyOrder?pageIndex=${i}">${i }</a>
			       							</c:otherwise>
		       						</c:choose>
	       						</c:forEach>
	       						<c:choose>
	       							<c:when test="${(page.currentPage+1)==page.totalPage }">
	       								<span class="disabled"> Next&gt;</span>
	       							</c:when>
	       							<c:otherwise>
	       								<a href="<%=basePath%>/order/toMyOrder?pageIndex=${(page.currentPage+1)+1}">Next&gt; </a>
	       							</c:otherwise>
	       						</c:choose>
	       					</c:when>
	       					<c:otherwise>
	       						<c:if test="${(page.currentPage+1)>5}">
	       							<c:if test="${(page.currentPage+1)<=(page.totalPage-5)}">
			       						<a href="<%=basePath%>/order/toMyOrder?pageIndex=${page.currentPage}">&lt;Prev</a>
			       						<a href="<%=basePath%>/order/toMyOrder?pageIndex=${(page.currentPage+1)-4}">${(page.currentPage+1)-4}</a>
			       						<a href="<%=basePath%>/order/toMyOrder?pageIndex=${(page.currentPage+1)-3}">${(page.currentPage+1)-3}</a>
			       						<a href="<%=basePath%>/order/toMyOrder?pageIndex=${(page.currentPage+1)-2}">${(page.currentPage+1)-2}</a>
			       						<a href="<%=basePath%>/order/toMyOrder?pageIndex=${(page.currentPage+1)-1}">${(page.currentPage+1)-1}</a>
			       						<span class="current">${(page.currentPage+1)}</span>
			       						<a href="<%=basePath%>/order/toMyOrder?pageIndex=${(page.currentPage+1)+1}">${(page.currentPage+1)+1}</a>
			       						<a href="<%=basePath%>/order/toMyOrder?pageIndex=${(page.currentPage+1)+2}">${(page.currentPage+1)+2}</a>
			       						...
			       						<a href="<%=basePath%>/order/toMyOrder?pageIndex=${page.totalPage-1}">${page.totalPage-1}</a>
										<a href="<%=basePath%>/order/toMyOrder?pageIndex=${page.totalPage}">${page.totalPage}</a>
			       						<a href="<%=basePath%>/order/toMyOrder?pageIndex=${(page.currentPage+1)+1}">Next&gt;</a>
		       						</c:if>
	       						</c:if>
	       					</c:otherwise>
	       				</c:choose>
	       			</c:when>
	       		</c:choose>
	       </div>
	       </c:if>		
   		</div><!--/span12-->
   		<!-- 分页工具条 end -->
   		
		  <!--申请退款 弹出框 start-->
		  <div id="refundRequestWindow" class="modal fade">
			  <div class="modal-dialog">
			    <div class="modal-content">
			      <div class="modal-header">
			        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
			        <h4 class="modal-title">Refund Request</h4>
			      </div>
			      <div class="modal-body">
				          <div class="row">
					      		<form id="redundApplyForm" action="<%=basePath %>/order/redundApply" method="post">
					      			<input type="hidden" id="orderId" name="id">
						            <div class="col-md-10 col-md-offset-1"><p class="text-left">
										<select class="form-control" name="refundApplyReason" >
							    			   <option value="">Select Reason</option>
							                   <option value="1">order error</option>
							                   <option value="2">others</option>
						                 	</select>
									 </div>
									 <div class="col-md-10 col-md-offset-1">
									 		<textarea class="form-control" rows="6" name="refundApplyDesc" placeholder="input your infomation please!"></textarea>
									 </div>
								</form>
				       	</div>
			      </div>
			      <div class="modal-footer">
			        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
			        <button type="button" class="btn btn-success" onclick="javascript:submitRefundRequestForm();">Sumbit</button>
			      </div>
			    </div><!-- /.modal-content -->
			  </div><!-- /.modal-dialog -->
		</div><!-- /.modal -->
		<!-- end 申请退款 弹出框 -->
    		
    		</div><!--/span8-->
      </div><!-- row-fluid -->


    </div><!-- container-fluid -->
  
  <script type="text/javascript"> 
  $('.trackinfoclass').popover('hide') ;
  function refundRequest(id){
	  $("#orderId").val(id) ;
  }
  
  function submitRefundRequestForm(){
	  $("#redundApplyForm").submit() ;
  }
  function monthSelected(obj){
	  window.location.href = "<%=basePath%>/order/toMyOrder?toMyOrderParam_month=" +obj.value;
  }
   </script>
  </body>
</html>